<template>
  <div class="login-container">
    <div class="login-header">
      <h2 class="login-title">宠物管理平台</h2>
    </div>
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="rules"
      class="login-form"
    >
      <el-form-item label="" prop="account" class="form-item">
        <el-input
          v-model="loginForm.account"
          prefix-icon="User"
          size="large"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="password" class="form-item">
        <el-input
          type="password"
          prefix-icon="Lock"
          v-model="loginForm.password"
          size="large"
          show-password
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item class="form-item">
        <el-button type="primary" class="login-button" @click="handleLogin"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>  
  
<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'  
import {login} from '@/api/login.js'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore();
const router = useRouter();
const loginForm = ref({
  account: "admin",
  password: "123456",
});

const rules = {
  account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 18, message: "长度在 5 到 18 个字符", trigger: "blur" },
  ],
};

const loginFormRef = ref(null);

const handleUserLogin = () => {
  login(loginForm.value)
    .then((res) => {
      userStore.adminToken = res.data.tokenValue;
      router.push({ path: "/admin" });
      ElMessage(
        {
          message:"登录成功",
          type: "success",
        });
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error(err.msg || "登录失败")
    });
};

function handleLogin() {
  loginFormRef.value.validate((valid) => {
    if (valid) {
     handleUserLogin()
    } else {
      console.log("表单验证失败！");
      return false;
    }
  });
}
</script>  
  
<style scoped>
.login-container {
  width: 100%;
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.login-title {
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #666;
}

/* .el-input {  
  border: 1px solid #dcdfe6;  
  border-radius: 4px;  
  outline: none;  
  height: 40px;  
  line-height: 40px;  
  font-size: 1rem;  
}   */

.login-button {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.login-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>